import {View, Text, StyleSheet, Image, ImageBackground, Easing} from 'react-native'
import React, {Component} from 'react'
import Modal from 'react-native-modalbox'
import {HUNDRED_PERCENT, default as styles, padding} from "../../../../style";
import Icon from 'react-native-vector-icons/Ionicons'
import toast from "../../../common/ToastProxy";


interface SignModalProps {

}

interface SignModalState {
    score: number
}


export default class SignModal extends Component<SignModalProps, SignModalState> {

    state = {
        score: 0
    };

    constructor(props: SignModalProps) {
        super(props);
    }

    modal: Modal = null;


    openModal = (score: number) => {
        this.setState({
            score
        }, () => {
            this.modal.open();
        })
    }
    closeModal = () => {
        this.modal.close();
    }

    render() {
        return (<Modal backdropPressToClose={false}
                       swipeToClose={false}
                       backdrop={true}
                       coverScreen={true}
                       ref={modal => this.modal = modal}
                       style={[{
                           height: HUNDRED_PERCENT,
                           width: HUNDRED_PERCENT,
                           backgroundColor: "rgba(0,0,0,0.001)"
                       }, styles.centered]}
        >
            <View style={[styles.centerH]}>
                <Icon style={[padding(30), {alignSelf: "flex-end", paddingRight: 0}]} name={"ios-close-circle-outline"}
                      size={30} color={"#fff"}
                      onPress={this.closeModal}/>
                <Image source={require("../../../../assets/img/sign_success.png")} style={{width: 200, height: 51}}/>
                <ImageBackground style={[styles.centered, {width: 214, height: 138, marginTop: 36}]}
                                 source={require("../../../../assets/img/pig.png")} resizeMode={"cover"}>
                    <Text style={SignModalStyle.score}>+{this.state.score}积分</Text>
                </ImageBackground>
            </View>

        </Modal>)
    }
}

const SignModalStyle = StyleSheet.create({
    container: {},
    score: {
        fontSize: 14,
        fontWeight: "bold",
        marginTop: 6,
        color: "#DA4E3F"
    }
});

 